<template>

    <el-container style="height: 100vh; width: 100%; border: 1px solid #eee;">
        <!-- 编辑aside窗口 导航栏-->
        <el-aside width="200px" style="position: fixed; height: 100vh; left: 0;">
            <div style="height: 44px; margin-top: 16px; font-size: 24px; color: #000000;">情感机器人</div>
            <div class="demo-basic--circle" style="margin-top: 16px; color: #FFF;">
                <div class="block">
                    <!--头像-->
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                </div>
                <div class="block;" style="color: black">{{ this.user.username }}</div>
            </div>
            <el-col style="margin-top: 16px;">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#409EFF"
                    text-color="#FFF"
                    active-text-color="#F2EB30"
                >
                    <el-menu-item @click="thisContent" index="1">
                        <i class="el-icon-menu" style="color: #FFF"></i>
                        <span slot="title">当前对话</span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location" style="color: #FFF"></i>
                            <span>历史对话</span>
                        </template>
                      <el-menu-item-group v-if="textDataO.length > 0">
                        <el-menu-item v-for="(record, index) in textDataO" :key="index" :index="`1-${index + 1}`" @click="handleMenuItemClick(index,record)">
                          {{ `${record.chat_time}` }}
                        </el-menu-item>
                      </el-menu-item-group>
                      <el-menu-item v-else>暂无历史对话</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-col>
        </el-aside>
        <!-- 包含header和main部分 -->
        <el-container>
            <!-- Header 静止 -->
            <el-header style="font-size: 16px; text-align: right; padding: 16px; background-color: #409EFF;">
                <el-dropdown front-size="32px" @command="logout">
                    <i class="el-icon-setting" style="margin-right: 8px; font-size: 16px; color: #FFF;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span style="color: #FFF;">{{ this.user.username }}</span>
            </el-header>

            <!-- Main 部分 -->
            <el-main style="padding-top: 64px; position: relative; height: calc(100vh - 64px);">
              <div>
                <audio controls>
                  <source :src="'http://cdn5.lizhi.fm/audio/2019/11/24/2773211094014858758_hd.mp3'" type="audio/mpeg">
                  Your browser does not support the audio element.
                </audio>
              </div>
                <div style="padding: 16px; height: calc(100% - 100px); box-sizing: border-box; overflow-y: auto;">
                    <!-- 消息列表 -->
                    <div class="message-list">
                        <!-- 机器人消息 -->
                        <div class="message robot-message">
                            欢迎访问情感咨询机器人！
                            <el-skeleton :rows="1" style="text-align: left" />
                        </div>
                      <div v-if="textData.length > 0">
                        <div v-for="item in textData" :key="item.id"  :class="item.role === 'user'? 'message user-message' : 'message robot-message'">
                          <template v-if="item.role === 'user'">
                            {{ item.content }}
                          </template>
                          <template v-if="item.role === 'assistant'">
                            {{ item.content }}
                          </template>
                        </div>
                      </div>

                    </div>
                </div>

                <!-- 输入框固定在main底部 -->
                <div class="input-area">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="textarea"
                        style="width: 75%; border-radius: 2px; border-color: #2c3e50"
                    ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="sendMessage">发送</el-button>
                    <el-button type="primary" icon="el-icon-delete" @click="createNewConversation">新建</el-button>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            circleUrl: 'https://picture.gptkong.com/20240926/185905e14f53b2401c8dea59fca45383f5.jpg',  // 头像URL
            textarea: '', // 输入框内容
          user:{},
          textData:[],
          textDataO:[],
            dto:{
              user_id: '',
              content: '',
            },
        };
    },
  created() {
      this.user=JSON.parse(localStorage.getItem('userData')) || {};
      this.getDataC(this.user.user_id)
      this.getDataO(this.user.user_id)
  },
    methods: {
      thisContent(){
        this.textData=[];
      },
      handleMenuItemClick(index,data) {
        // 在这里处理菜单点击事件，可以根据 index 来确定点击的是哪个历史对话
        this.textData=JSON.parse(data.msgData);
        this.dto.user_id=this.user.user_id;
        this.dto.content=data.msgData;
        this.upDataN()

      },
        handleOpen() {
            console.log('菜单展开');
        },
        handleClose() {
            console.log('菜单关闭');
        },
        sendMessage() {
            console.log('发送消息:', this.textarea);
            // 这里可以添加实际的发送逻辑
          this.dto.user_id=this.user.user_id;
          this.dto.content=this.textarea;
          this.getData()
            this.textarea = ''; // 发送后清空输入框
        },
        createNewConversation() {
        this.newChat(this.user.user_id)
          this.textData=[];
            console.log('新建话');
            // 这里可以添加新建对话逻辑
        },
      getData(){
          axios.post("http://localhost:8080/applications/chat",this.dto) .then(response => {
            this.textData=response.data.data;
          })
              .catch(error => {
                console.error('Error fetching accounts:', error);
              });
      },
      logout(command){
          if(command==="logout"){
            this.newChat(this.user.user_id);
            localStorage.setItem('userData',null);
            this.$router.push("/");
          }
      },
      newChat(userId){
        axios.get("http://localhost:8080/applications/c4", {
          params: {
            user_id: userId
          },
        })
        this.getDataO(this.user.user_id);
      },
      getDataC(userId){
        axios.get("http://localhost:8080/applications/c3", {
          params: {
            user_id: userId
          },
        }) .then(response => {
          if(response.data.code===200){
            this.textData=response.data.data;
          }
        })
            .catch(error => {
              console.error('Error fetching accounts:', error);
            });
      },
      getDataO(userId){
        axios.get("http://localhost:8080/applications/c5", {
          params: {
            user_id: userId
          },
        }) .then(response => {
          this.textDataO=response.data.data;
        })
            .catch(error => {
              console.error('Error fetching accounts:', error);
            });
      },
      upDataN(){
        axios.post("http://localhost:8080/applications/c7",this.dto)
            .then(response => {
              console.log(response.data)
        })
            .catch(error => {
              console.error('Error fetching accounts:', error);
            });
      },

    },

};
</script>

<style scoped>
/* 设置Aside和Header的固定布局 */
.el-aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    border-style: solid;
    border-color: #eeeeee;
}

.el-header {
    position: fixed;
    top: 0;
    right: 0;
    padding-right: 0;
    width: calc(100% - 200px);
    background-color: #409EFF; /* 保持Header的背景颜色 */
    z-index: 1000;
    border-style: solid;
    border-color: #eeeeee;
}

.el-main {
    margin-left: 200px; /* 确保主内容部分不被侧边栏遮挡 */
    position: relative;
    padding-bottom: 64px; /* 为输入框预留空间 */
    border-style: solid;
    border-color: #eeeeee;
}

/* 消息列表样式 */
.message-list {
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* 消息样式 */
.message {
    clear: both;
    padding: 10px;
    margin-bottom: 10px;
}

.robot-message {
    float: left;
    width: 45%;
    background-color: #f0f0f0;
    border-radius: 10px;
}

.user-message {
    float: right;
    width: 45%;
    background-color: #cce5ff;
    border-radius: 10px;
}

/* 输入区域样式 */
.input-area {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: calc(100% - 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #eee;
}

.input-area .el-input {
    flex: 1;
    margin-right: 16px;
}

.input-area .el-button {
    flex-shrink: 0;
}
</style>
